<template>
    <a-layout-sider
            :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
            width="256px"
            :collapsible="collapsible"
            v-model="collapsed"
            :trigger="null">
        <logo/>
        <s-menu
                :collapsed="collapsed"
                :menu="menus"
                :theme="theme"
                :mode="mode"
                @select="onSelect"
                style="padding: 16px 0px;"/>
    </a-layout-sider>

</template>

<script>
    import Logo from '@/core/layouts/tools/Logo'
    import SMenu from './index'
    import Setting from "@/core/mixin/Setting";

    export default {
        mixins: [Setting],
        name: 'SideMenu',
        components: {Logo, SMenu},
        props: {
            mode: {
                type: String,
                required: false,
                default: 'inline'
            },
            theme: {
                type: String,
                required: false,
                default: 'dark'
            },
            collapsible: {
                type: Boolean,
                required: false,
                default: false
            },
            collapsed: {
                type: Boolean,
                required: false,
                default: false
            },
            menus: {
                type: Array,
                required: true
            }
        },
        methods: {
            onSelect(obj) {
                this.$emit('menuSelect', obj)
            }
        }
    }
</script>
